<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.scanRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="distributed">
				<view class="distributed-head">
					<view class="header">
						<view class="receipts_header_title">{{$t('materials.summaryOfMaterials')}}</view>
						<view class="card-rotating" @click.stop="pulldown">
							<uni-icons v-if="!data.showPull" type="bottom" color="#9C9C9C" size="20"></uni-icons>
							<uni-icons v-if="data.showPull" type="top" color="#9C9C9C" size="20"></uni-icons>
						</view>
					</view>
					<view class="queryMessage_list" id="receipt"  :style="{height:data.summaryHeight}">
						<view class="queryMessage_list_card" v-for="(x,index) in data.list" :key="index">
							<view class="queryMessage_list_div">
								<view class="queryMessage_list_frist" style="margin-right: 4rpx;">
									<view class="queryMessage_list_title">{{ $t('distributedEnter.materialCode') }}:</view>
									<view class="queryMessage_list_spec">{{ x.materialCode || 0 }}</view>
								</view>
								<view class="queryMessage_list_tow" style="margin-right: 4rpx;">
									<view class="queryMessage_list_title">{{ $t('translationImage.scanQty') }}:</view>
									<view class="queryMessage_list_spec">{{ x.total || 0 }}</view>
								</view>
							</view>
							<view class="queryMessage_list_three" style="margin-right: 4rpx;">
								<view class="queryMessage_list_title">{{ $t('materials.dosageOfToday') }}:</view>
								<view class="queryMessage_list_spec">{{ x.dosage || 0 }}</view>
							</view>
						</view>
					</view>
				</view>
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
					<view class="record-card" v-for="(item, index) in data.barcodeList" :key="`${item.barcode}` + `${index}`">
						<view class="card-mini-head">
							<view class="title-line"></view>
							<text>{{$t('translationImage.serialNumber')}}：{{data.barcodeList.length-index}}</text>
						</view>
						<uni-icons class="close-icons" type="closeempty" color="#9C9C9C" size="30"
							@click="handelClosePopup(index, item)"></uni-icons>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedOut.barcode') }}：</text>{{ item.barcode }}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text>{{item.materialCode}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{item.materialName}}
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{item.materialSpec || ''}}
						</view>
						<view class="custom-card-itemOne">
							<view class="card-item-50">
								<text class="item-info-title">{{$t('distributedEnter.uom')}}：</text>{{item.unit}}
							</view>
							<view class="card-item-50">
								<text class="item-info-title">{{$t('distributedEnter.qty')}}：</text>{{item.currentQty}}
							</view>
						</view>
						<view class="custom-card-itemOne">
							<view class="card-item-50">
								<text class="item-info-title">{{ $t('translationImage.transferredWarehouse')}}：</text>{{item.goalWarehouseCode}}
							</view>
							<view class="card-item-50">
								<text class="item-info-title">{{ $t('translationImage.transferredSeat')}}：</text>{{ item.goalLocationCode }}
							</view>
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('materials.todaysRecommendedDosage')}}：</text>{{(item.standardDosage||0)}}
						</view>
						<view class="custom-card-itemOne" >
							<view class="card-item-50" >
								<text class="item-info-title">{{ $t('warehousing.transferType')}}：</text>{{item.transferType}}
							</view>
							<view class="card-item-50">
								<text class="item-info-title">{{ $t('warehousing.transferQty')}}：</text>{{(item.changeQty||item.currentQty)}}
							</view>
						</view>
						<view class="custom-card-itemOne">
							<text class="item-info-title">{{ $t('translationImage.process') }}：</text>{{item.processCode}}
						</view>
					</view>
				</scroll-view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { navigate } from '@/utils/routerSkip.js';
import { useStore } from "vuex";
import {
	ref,
	reactive,
	onMounted,
	watch,
	computed,
	toRaw
} from 'vue';
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_DEL, OPERATION_LOOK } from '@/constant/index.js'
let data = reactive({
	barcodeList: [],//条码数组
	showPull: true,
	list: [],
	summaryHeight:'auto'  
})
onMounted(() => {
	try {
		let inputParameter = '无'
		let returnParameter = JSON.stringify(data.barcodeList)
		let operationPicture = '原材料调拨'
		let callInterface = '无'
		let opertionParmes = {
			inputParameter,
			returnParameter,
			operationPicture,
			callInterface,
			responseCode: '无',//返回状态
			errorMessage: '无',//错误信息
			isPass: 'Y',//是否成功 Y N
			operationType: OPERATION_LOOK
		}
		basPdaOperationLogFn(opertionParmes)
	} catch (error) {
	}
	collect()
})
let store = useStore();
data.barcodeList = computed(() => {
	return store.state.allotList
})
const handelClosePopup = (index, item) => {
	try {
		let inputParameter = JSON.stringify(item)
		let returnParameter = '无'
		let operationPicture = '原材料调拨'
		let callInterface = '无'
		let opertionParmes = {
			inputParameter,
			returnParameter,
			operationPicture,
			callInterface,
			responseCode: '无',//返回状态
			errorMessage: '无',//错误信息
			isPass: 'Y',//是否成功 Y N
			operationType: OPERATION_DEL
		}
		basPdaOperationLogFn(opertionParmes)
	} catch (error) {
	}
	store.commit('deleteAllotList', index)
	collect()
}

const collect = () => {
	let list = Object.values(data.barcodeList)
	let dataInfo = {};
	// console.log(list)
	list.forEach((item, index) => {
		let { materialCode } = item;
		// console.log(item)
		if (!dataInfo[materialCode]) {
			dataInfo[materialCode] = {
				materialCode,
				child: []
			}
		}
		dataInfo[materialCode].child.push(item)
		dataInfo[materialCode].total = dataInfo[materialCode].child.reduce((pre, cur) => {
			// 
			return pre + cur.currentQty;
		}, 0)
		dataInfo[materialCode].dosage=dataInfo[materialCode].child.reduce((pre, cur,index,arr)=>{
			console.log(pre, cur)
			let qty;
			if(cur && arr[(index-1<=0)?0:(index-1)].processCode != arr[index].processCode ){
				 qty=Number(pre||0) + Number(cur.standardDosage||0)
			}
			else{
				qty= Number(cur.standardDosage||0);
			}
			// console.log(Number(pre.standardDosage) , Number(cur.standardDosage)) 
			return qty;
		},0)
		console.log(12313)
	});
	data.list = Object.values(dataInfo); 
	// console.log(data.list)
}
// 点击隐藏与显示
const pulldown = () => {
	if (data.showPull) {
		data.summaryHeight="auto"
		//div.style.cssText = "height:auto"
		
	} else {
		data.summaryHeight="10rpx"
		//div.style.cssText = "height:10rpx"	
	}
	data.showPull=!data.showPull
}

const scrolltolowerFn = () => {
	if (!data.noticeHooks) {
		data.page++
	}
}
</script>

<style scoped lang="scss">
.distributed {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	/* // height: 100vh; */
}

.header {
	height: 60rpx;
	font-size: 24rpx;
	width: 100%;
	line-height: 60rpx;
	padding: 0 40rpx 0 20rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-bottom: 2rpx dashed #cecece;
	position: relative;
	color: #6B6969;
}

.queryMessage_list {
	height: 120rpx;
	width: 100%;
	overflow: hidden;

	&_card {
		color: rgb(107, 105, 105);
		letter-spacing: 4rpx;
		margin: 20prx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-bottom: 2rpx dashed #cecece;
	}
	.queryMessage_list_div{
		width: 100%;
		height:60rpx;
		display: flex;
		flex-direction: row;
	}
	&_frist {
		height: 60rpx;
		width: 50%;
		background-color: #fff;
		display: flex;
		flex-direction: row;
	}

	&_title {
		height: 60rpx;
		width: auto;
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
		letter-spacing: 2rpx;
		padding: 0 20rpx 0 20rpx;
		box-sizing: border-box;
	}

	&_spec {
		flex: 1 1 auto;
		font-size: 20rpx;
		text-align: left;
		line-height: 60rpx;
	}

	&_tow {
		width: 50%;
		background-color: #fff;
		display: flex;
		flex-direction: row;
	}
	&_three{
		width: 100%;
		display: block;
		background-color: #fff;
		display: flex;
		flex-direction: row;
	}
}

.scroll {
	flex: 1;
	height: 2rpx;
}
</style>
